<template>
  <a-card :bordered="false">
    <div style="display: flex; justify-content: space-between">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="handleAdd" type="primary" icon="plus" v-has="'xhdjCoachInfo:add'">新增</a-button>
        <a-button type="primary" icon="download"   v-has="'coachInfo:exportXls'"   @click="handleExportXls('技师表')">导出</a-button>
<!--      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"-->
<!--        @change="handleImportExcel">-->
<!--        <a-button type="primary" icon="import">导入</a-button>-->
<!--      </a-upload> -->
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item v-has="'coach:commit'" key="1" @click="proportionalClick">抽成比例</a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
        </a-dropdown>
      </div>
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-form-item label="城市服务商" style="margin-right: 10px" v-has="'xhdjCoachInfo:select'">
            <serveSelect @selectClick="selectClick" :value="queryParam.agencyCode"></serveSelect>
          </a-form-item>
          <a-form-item label="技师是否上线" style="margin-right: 10px">
            <a-select
              v-model="queryParam.status"
              style="width: 120px"
              :options="options"
              allowClear
              placeholder="请选择"
              @change="searchQuery"
            />
          </a-form-item>
          <a-form-item label="审核状态" style="margin-right: 10px">
            <a-select
              v-model="queryParam.checkStatus"
              style="width: 120px"
              :options="optionses"
              allowClear
              placeholder="请选择"
              @change="searchQuery"
            />
          </a-form-item>
<!--          <a-form-item label="黑名单" style="margin-right: 10px">-->
<!--            <a-select-->
<!--              v-model="queryParam.blackFlag"-->
<!--              style="width: 120px"-->
<!--              :options="blackFlagOptionses"-->
<!--              allowClear-->
<!--              placeholder="请选择"-->
<!--              @change="searchQuery"-->
<!--            />-->
<!--          </a-form-item>-->

          <a-form-item label="技师艺名" style="margin-right: 10px">
            <a-input placeholder="请输入技师艺名" v-model="queryParam.coachName" @pressEnter="searchQuery"></a-input>
          </a-form-item>
          <a-form-item label="技师真名" style="margin-right: 10px">
            <a-input placeholder="请输入技师真名" v-model="queryParam.realName" @pressEnter="searchQuery"></a-input>
          </a-form-item>
          <!-- v-if="toggleSearchStatus" -->
          <template>
            <a-form-item label="手机" style="margin-right: 10px">
              <a-input placeholder="请输入手机" v-model="queryParam.mobile" @pressEnter="searchQuery"></a-input>
            </a-form-item>
          </template>
          <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a> -->
          </span>
        </a-form>
      </div>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{ x: 'auto' }"
        class="j-table-force-nowrap"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
        @change="handleTableChange"
      >
        <!-- 抽成比例 -->
        <template slot="statuses" slot-scope="text, record">
          <span v-has="'coach:commit'"
            ><a-input-number
              size="small"
              :min="0"
              :max="100"
              v-model="record.commissionRate"
              @blur="commissionRateChange(record)"
            />
            %</span
          >
        </template>
        <template slot="parentUserId" slot-scope="text, record">
          <span v-has="'coach:parentUserId'"
          ><a-input-number
            size="small"
            v-model="record.parentUserId"
            @blur="setParentUserId(record)"
          />
          </span
          >
        </template>

<!--技师姓名-->


        <template slot="coachName" slot-scope="text, record">
          <div>
            <span v-if="record.recommend === 0">{{ record.coachName }}</span>
          </div>
          <div v-if="record.recommend === 1">
            <span class="font-amount">{{ record.coachName }}</span>
          </div>

        </template>

        <!-- 状态 -->
        <template slot="status" slot-scope="text, record">
          <a-switch default-checked :checked="record.status" @change="statusChange(record)" />
        </template>



        <!-- 审核状态 -->
        <template slot="checkStatus" slot-scope="text, record">
          <a-tag :color="checkStatuses[record.checkStatus].color">
            {{ checkStatuses[record.checkStatus].title }}
          </a-tag>
        </template>


        <template slot="recommend" slot-scope="text, record">
          <a-switch default-checked :checked="record.recommend" @change="recommendChange(record)" />
        </template>

        <template slot="workingFlag" slot-scope="text, record">
          <a-switch default-checked :checked="record.workingFlag" @change="setWorkingFlag(record)" />
        </template>

        <template slot="blackFlag" slot-scope="text, record">
          <a-switch default-checked :checked="record.blackFlag" @change="setBlackFlagChange(record)" />
        </template>
        <!-- 工作照 -->
<!--        <template slot="workImg" slot-scope="text, record">-->
<!--          <div class="anty-img-wrap">-->
<!--            <a-avatar shape="square" :src="getAvatarView(record.workImg)" />-->
<!--          </div>-->
<!--        </template>-->

        <template slot="workImg" slot-scope="text, record">
          <div class="anty-img-wrap" style="height: 100px; width: 105px">
            <j-image-upload v-if="record.workImg" text="上传" disabled v-model="record.workImg"></j-image-upload>
          </div>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)" v-has="'xhdjCoachInfo:edit'">编辑</a>
<!--          <span v-has="'xhdjCoachInfo:details'">-->
<!--            <a-divider type="vertical" />-->
<!--            <a @click="handlePromotion(record)">推广详情</a>-->
<!--          </span>-->

<!--            <span v-has="'xhdjCoachInfo:tuiguangshezhi'">-->
<!--            <a-divider type="vertical" />-->
<!--            <a @click="tuiguangshezhi(record)">推荐人设置</a>-->
<!--          </span>-->


          <span v-if="record.checkStatus === 0" v-has="'xhdjCoachInfo:sh'">
            <a-divider type="vertical" />
            <a @click="handleExamine(record)">审核</a>
          </span>

          <span v-has="'xhdjCoachInfo:time'">
            <a-divider type="vertical" />
            <a @click="handleTime(record)">时间管理</a>
          </span>

          <a-divider type="vertical" v-has="'xhdjCoachInfo:server'" />
          <a @click="serverEdit(record)" v-has="'xhdjCoachInfo:server'">服务</a>
          <a-divider type="vertical" v-has="'xhdjCoachInfo:server'" />
<!--          <a @click="handleDelete(record.id)" v-has="'xhdjCoachInfo:del'">删除</a>-->
           <a-popconfirm title="确定删除吗?"   @confirm="() => handleDelete(record.id)">
                  <a v-has="'xhdjCoachInfo:del'">删除</a>
                </a-popconfirm>
          <!-- <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown> -->
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <!-- 表单区域 -->
    <XhdjCoachInfoModal ref="modalForm" @ok="modalFormOk"></XhdjCoachInfoModal>
    <XhdjCoachInfoDialog ref="dialogForm"></XhdjCoachInfoDialog>
    <xhdjxhdjCoachInfoExamine ref="examinedialog" @ok="modalFormOk"></xhdjxhdjCoachInfoExamine>
    <XhdjxhdjCoachInfoPro ref="podialog" @ok="modalFormOk"></XhdjxhdjCoachInfoPro>
    <XhdjCoachInfoListModal ref="XhdjCoachInfoListModal" @ok="modalFormOk"></XhdjCoachInfoListModal>
    <XhdjCoachInfoListTime ref="XhdjCoachInfoListTime" @ok="modalFormOk"></XhdjCoachInfoListTime>
    <XhdjCoachgenhuanjishi ref="XhdjCoachgenhuanjishi" @ok="modalFormOk"></XhdjCoachgenhuanjishi>

  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import Area from '@/components/_util/Area'
import XhdjCoachInfoModal from './modules/XhdjCoachInfoModal'
import xhdjxhdjCoachInfoExamine from './modules/xhdjxhdjCoachInfoExamine'
import XhdjCoachInfoDialog from './modules/XhdjCoachInfoDialog.vue'
import XhdjCoachInfoListTime from './modules/XhdjCoachInfoListTime.vue'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import XhdjCoachgenhuanjishi from './modules/xhdjCoachtuiguanshezhi.vue'

import { getFileAccessHttpUrl, getAction, httpAction } from '@/api/manage'
import XhdjxhdjCoachInfoPro from './modules/XhdjxhdjCoachInfoPro.vue'
import { USER_AUTH, SYS_BUTTON_AUTH } from '@/store/mutation-types'
import serveSelect from '@/components/serveSelect.vue'
import XhdjCoachInfoListModal from './modules/XhdjCoachInfoListModal.vue'
import { del } from 'vue'

export default {
  name: 'XhdjCoachInfoLists',
  mixins: [JeecgListMixin],
  components: {
    XhdjCoachInfoModal,
    XhdjCoachInfoDialog,
    xhdjxhdjCoachInfoExamine,
    XhdjxhdjCoachInfoPro,
    serveSelect,
    XhdjCoachInfoListModal,
    XhdjCoachInfoListTime,
    XhdjCoachgenhuanjishi
  },
  statuses: {
    0: false,
    1: true
  },
  data () {
    return {
      description: '技师表管理页面',
      options: [
        {
          value: '1',
          label: '上线'
        },
        {
          value: '0',
          label: '下线'
        }
      ],
      optionses: [
        {
          value: '2',
          label: '审核不通过'
        },
        {
          value: '1',
          label: '已审核'
        },
        {
          value: '0',
          label: '未审核'
        }
      ],
      blackFlagOptionses: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        }
      ],
      // checkStatuses: {
      //   0: '审核中',
      //   1: '审核通过',
      //   2: '审核未通过',
      // },
      checkStatuses: [
        { title: '审核中', color: 'orange' },
        { title: '审核通过', color: 'green' },
        { title: '审核未通过', color: 'red' }
      ],
      // 表头
      columns: [
        {
          title: '技师编号',
          align: 'center',
          dataIndex: 'id'
        },
        {
          title: '工作照',
          align: 'center',
          dataIndex: 'workImg',
          scopedSlots: { customRender: 'workImg' }
        },
        {
          title: '服务商编码',
          align: 'center',
          dataIndex: 'agencyCode'
        },
        {
          title: '艺名',
          dataIndex: 'coachName',
          scopedSlots: { customRender: 'coachName' }
        },

        {
          title: '真实姓名',
          align: 'center',
          dataIndex: 'realName'
        },
        // {
        //   title: '店铺名称',
        //   align: 'center',
        //   dataIndex: 'licenseName'
        // },
        // {
        //   title: '专业技能',
        //   align: 'center',
        //   dataIndex: 'skillName'
        // },
        {
          title: '性别',
          align: 'center',
          dataIndex: 'sex',
          customRender: (text, record) => {
            return record.sex == 1 ? '男' : '女'
          }
        },
        {
          title: '年龄',
          align: 'center',
          dataIndex: 'age'
        },
        {
          title: '手机',
          align: 'center',
          dataIndex: 'mobile'
        },
        {
          title: '身份证号',
          align: 'center',
          dataIndex: 'idCode'
        },
        {
          title: '服务收入余额',
          align: 'center',
          dataIndex: 'coachIncome'
        },
        {
          title: '车费余额',
          align: 'center',
          width: 60,
          dataIndex: 'fare'
        },
        // {
        //   title: '佣金余额',
        //   align: 'center',
        //   width: 60,
        //   dataIndex: 'commissionAmount'
        // },
        // {
        //   title: '推广用户数',
        //   align: 'center',
        //   width: 60,
        //   dataIndex: 'inviterNumber'
        // },
        // {
        //   title: '推广技师数',
        //   align: 'center',
        //   width: 60,
        //   dataIndex: 'inviterCoachNumber'
        // },
        {
          title: '提成比例',
          align: 'center',
          dataIndex: 'statuses',
          scopedSlots: { customRender: 'statuses' }
        },
        {
          title: '当前地址',
          align: 'center',
          width: 60,
          dataIndex: 'address'
        },
        {
          title: '备注',
          align: 'center',
          width: 60,
          dataIndex: 'remark'
        },
        {
          title: '提成模式',
          align: 'center',
          dataIndex: 'patternType',
          customRender: (text, record) => {
            // return record.patternType === '0' ? '系统默认' : record.patternType === '1' ? '提成方案A' : '提成方案B'
            if (record.patternType === '0') {
              return '系统默认';
            } else if (record.patternType === '1') {
              return '提成方案A';
            } else if (record.patternType === '2') {
              return '提成方案B';
            } else if (record.patternType === '3') {
              return '提成方案C';
            }
          }
        },

        {
          title: '技师是否上线',
          align: 'center',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '星级芳疗师',
          align: 'center',
          dataIndex: 'recommend',
          scopedSlots: { customRender: 'recommend' }
        },
        {
          title: '黑名单',
          align: 'center',
          dataIndex: 'blackFlag',
          scopedSlots: { customRender: 'blackFlag' }
        },
        {
          title: '工作状态',
          align: 'center',
          dataIndex: 'workingFlag',
          scopedSlots: { customRender: 'workingFlag' }
        },
        {
          title: '审核状态',
          align: 'center',
          dataIndex: 'checkStatus',
          scopedSlots: { customRender: 'checkStatus' }
        },
        // {
        //   title: '推荐人',
        //   align: 'center',
        //   dataIndex: 'parentCoachName'
        // },
        // {
        //   title: '推广员编号',
        //   align: 'center',
        //   dataIndex: 'parentUserId'
        // },

        {
          title: '推广员编号',
          align: 'center',
          dataIndex: 'parentUserId',
          scopedSlots: { customRender: 'parentUserId' }
        },

        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      userAuthList: [],
      ids: [],
      url: {
        list: '/xhdjCoachInfo/list',
        delete: '/xhdjCoachInfo/delete',
        deleteBatch: '/xhdjCoachInfo/deleteBatch',
        exportXlsUrl: '/xhdjCoachInfo/exportXls',
        importExcelUrl: '/xhdjCoachInfo/importExcel',
        select: '/xhdjServerCoachLink/list',
        examine: '/xhdjCoachInfo/audit',
        setRate: '/xhdjCoachInfo/setRate',
        setParentUserId: '/xhdjCoachInfo/setParentUserId',
        edit: '/xhdjCoachInfo/edit',
        setBlackFlag: '/xhdjCoachInfo/setBlackFlag',
        setworkingFlag: '/coach/xhdjCoachInfo/updateWorkingFlag',
      }
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  created () {
    this.all = new Area().all
    this.userAuthList = JSON.parse(sessionStorage.getItem(USER_AUTH) || '[]')
    let a = this.userAuthList.filter(res => res.action == 'coach:commit')
    if (a && a.length == 0) {
      return (this.columns = this.columns.filter(res => res.title != '抽成比例'))
    }
    this.allList = this.all.filter(res => res.index == 1)
  },
  methods: {
    handlePromotion (record) {
      this.$refs.XhdjCoachInfoListModal.edit(record.id)
      this.$refs.XhdjCoachInfoListModal.title = '推广详情'
      this.$refs.XhdjCoachInfoListModal.disableSubmit = false
    },
    tuiguangshezhi (record) {
      this.$refs.XhdjCoachgenhuanjishi.edit(record)
      this.$refs.XhdjCoachgenhuanjishi.title = '推荐人设置'
    },
    handleTime (record) {
      console.log(this)
      this.$refs.XhdjCoachInfoListTime.edit(record)
      this.$refs.XhdjCoachInfoListTime.title = '时间管理'
      this.$refs.XhdjCoachInfoListTime.disableSubmit = false
    },
    onSelectChange (selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
      this.ids = selectedRowKeys
    },
    selectClick (value) {
      this.queryParam.agencyCode = value
      this.searchQuery()
    },
    // 批量处理抽成比例
    proportionalClick () {
      if (this.ids && this.ids.length > 0) {
        this.ids = this.ids.join(',')
      }
      this.$refs.podialog.edit(this.ids)
      this.$refs.podialog.title = '抽成比例'
    },
    getAvatarView: function (avatar) {
      return getFileAccessHttpUrl(avatar)
    },
    // 改变状态
    statusChange (record) {
      let a = {
        id: record.id,
        status: record.status ? 0 : 1
      }
      httpAction(this.url.examine, a, 'post').then(res => {
        if (res.success) {
          this.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    // 抽成管理
    commissionRateChange (value) {
      httpAction(this.url.setRate, value, 'post').then(res => {
        if (res.success) {
          this.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    // 抽成管理
    setParentUserId (value) {
      httpAction(this.url.setParentUserId, value, 'post').then(res => {
        if (res.success) {
          this.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },



    recommendChange (record) {
      let a = {
        id: record.id,
        recommend: record.recommend ? 0 : 1
      }
      httpAction(this.url.examine, a, 'post').then(res => {
        if (res.success) {
          this.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    setWorkingFlag (record) {
      let a = {
        coachUserId: record.id,
        workingFlag: record.workingFlag ? 0 : 1
      }
      httpAction(this.url.setworkingFlag, a, 'post').then(res => {
        if (res.success) {
          this.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },




    setBlackFlagChange (record) {
      let a = {
        id: record.id,
        blackFlag: record.blackFlag ? 0 : 1
      }
      httpAction(this.url.setBlackFlag, a, 'post').then(res => {
        if (res.success) {
          this.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },

    updateRemark (record) {
      let a = {
        id: record.id,
        remark: record.remark
      }
      httpAction(this.url.edit, a, 'post').then(res => {
        if (res.success) {
          this.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },

    // 跳转服务页
    serverEdit (record) {
      this.$refs.dialogForm.edit(record)
      this.$refs.dialogForm.title = '服务配置'
      this.$refs.dialogForm.disableSubmit = false
    },
    handleExamine (record) {
      this.$refs.examinedialog.edit(record)
      // this.$refs.examinedialog.title = '服务配置'
      this.$refs.examinedialog.disableSubmit = false
    },
    // 城区中文显示
    cityGS (value) {
      var a = []
      a = this.all.filter(res => res.id == value)[0].text
      if (value == null) {
        a = ['未知']
      }
      console.log('我是aaa', a)
      return a
    },
    // handleDelete (record) {
    //   console.log('删除11111111111111', record)
    // }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
.ant-form {
  display: flex;
  justify-content: flex-end;
}
.ant-row {
  display: flex;
  justify-content: flex-end;
}

.font-amount {
  color: #f605aa;
  font-size: 16px;
}
</style>

